<template>
    <nav-bar>
        <template v-slot:default>小T书城</template>
    </nav-bar>
    <banner :banner-data="banners"></banner>
    <recommend :recommends="recommends"></recommend>
    <tab-control @tabclick="tabclick" :titles="titles" :agoods="showGoods"></tab-control>
    <br>
    <br>
</template>

<style lang="scss" scoped>
    banner{
        width: 100%;
        height: auto;
        margin-top: 45px;
    }

</style>

<script>
import {computed,ref, reactive, toRefs} from "vue";
    import NavBar from "@/components/common/navbar/NavBar";
    import Banner from "@/views/home/Banner";
    import Recommend from "@/views/home/Recommend";
    import TabControl from "@/components/common/tabControl/TabControl";
    //import GoodsList from "@/components/goodsList/GoodsList";

    export default {
        components:{
            Recommend,
            Banner,
            NavBar,
            TabControl,
            //GoodsList
        },
        setup() {
            const state = reactive({
                banners: [
                    require('../../assets/images/banner1.jpg'),
                    require('../../assets/images/banner2.jpg'),
                    require('../../assets/images/banner3.jpg')
                ],
                recommends: [
                    {
                        url: require('../../assets/images/rjsg.jpg'),
                        title: '人间失格'
                    },
                    {
                        url: require('../../assets/images/shj.jpg'),
                        title: '山海经'
                    },
                    {
                        url: require('../../assets/images/zzgjdl.jpg'),
                        title: '中国国家地理杂志'
                    }

                ],
                titles: [
                    {
                        tName: 'first',
                        title: '精品推荐'
                    },
                    {
                        tName: 'second',
                        title: '降价特卖'
                    },
                    {
                        tName: 'three',
                        title: '编程世界'
                    }
                ]

            })
            const goods = reactive({
              sales: {
                  list: [
                      {
                          id:1,
                          url: require('../../assets/images/rjsg.jpg'),
                          title: '人间失格',
                          price: 88,
                          collectCount: 58
                      },
                      {
                          id:2,
                          url: require('../../assets/images/shj.jpg'),
                          title: '山海经',
                          price: 88,
                          collectCount: 58
                      },
                      {
                          id:3,
                          url: require('../../assets/images/zzgjdl.jpg'),
                          title: '中国国家地理杂志',
                          price: 88,
                          collectCount: 58
                      },
                      {
                          id:4,
                          url: require('../../assets/images/cg.jpg'),
                          title: '茶馆',
                          price: 56,
                          collectCount: 66
                      },
                      {
                          id:5,
                          url: require('../../assets/images/zbycy.jpg'),
                          title: '自卑与超越',
                          price: 92,
                          collectCount: 23
                      },
                      {
                          id: 6,
                          url:require('../../assets/images/st.jpg'),
                          title: '三体',
                          price: 56,
                          collectCount: 63
                      }
                  ],
              },
              news: {
                  list:[
                      {
                          id:7,
                          url:require('../../assets/images/bxtbl.jpg'),
                          title: '别想太多了',
                          price: 23,
                          collectCount: 89
                      },
                      {
                          id:1,
                          url: require('../../assets/images/rjsg.jpg'),
                          title: '人间失格',
                          price:70,
                          collectCount:53
                      },
                      {
                          id:2,
                          url: require('../../assets/images/shj.jpg'),
                          title: '山海经',
                          price:99,
                          collectCount:23
                      },
                      {
                          id: 8,
                          url: require('../../assets/images/aqzz.jpg'),
                          title: '阿Q正传',
                          price: 74,
                          collectCount: 12
                      }
                  ],
              },
              recommend: {
                  list:[
                      {
                          id: 9,
                          url: require('../../assets/images/dnzzywx.jpg'),
                          title: '电脑组装与维修',
                          price: 132,
                          currentType: 45
                      },
                      {
                          id: 10,
                          url: require('../../assets/images/JavaWeb.jpg'),
                          title: 'JavaWeb',
                          price: 91,
                          currentType: 45
                      },
                      {
                          id: 11,
                          url: require('../../assets/images/python.jpg'),
                          title: 'Python从入门到实战',
                          price: 114,
                          currentType: 65
                      },
                      {
                          id: 12,
                          url: require('../../assets/images/cyy.jpg'),
                          title: 'C语言从入门到精通',
                          price: 126,
                          currentType: 61
                      },
                      {
                          id: 13,
                          url: require('../../assets/images/plc.jpg'),
                          title: 'PLC编程',
                          price: 152,
                          currentType: 62
                      },
                      {
                          id:14,
                          url: require('../../assets/images/bnbddbc.jpg'),
                          title: '不能不懂的编程',
                          price: 86,
                          currentType: 32
                      }

                  ]
              }
            })
            let currentType = ref('sales')
            const showGoods = computed(() => {
                return goods[currentType.value]
            })
            const tabclick = (index) => {
              let types = ['sales','news','recommend']
                currentType.value = types[index]
            }
            return {
                ...toRefs(state),
                ...toRefs(goods),
                tabclick,
                showGoods

            }
        }
    }
</script>

